<template>
  <div id="wechat-binding-page">
    <div class="page-title page-title-white" :style="{top:(this.getSafeArea().top+5)+'px'}">
      <div id="back-button"  @click="$router.back()">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>微信绑定</span>
    </div>
    <!--微信用户信息模块-->
    <div id="wechat-info" style="position: relative" :style="{top:(this.getSafeArea().top+5)+'px'}">
      <div id="box1">
        <div class="item">
          <div class="wechat-logo-item"></div>
        </div>
        <div class="item">
          <div class="exchange-item"></div>
        </div>
        <div class="item">
          <div class="logo-item"></div>
        </div>
        <div class="c"></div>
      </div>
      <div id="box2">
        <img :src="memberIcon"/>
        <span v-text="memberNickname"></span>
      </div>
    </div>

    <!--表单模块-->
    <el-form style="position: relative" :style="{top:(this.getSafeArea().top+5)+'px'}" class="form wechat-binding-form" label-width="90px" :model="form" :rules="rules" ref="ruleForm" size="medium">
      <el-form-item label="手机号" prop="username">
        <el-col :span="20">
          <el-input
            placeholder="请输入 手机号"
            v-model="form.username"
            @keyup.enter.native="submit"
            clearable>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="验证码" prop="verify">
        <el-col :span="13">
          <el-input
            placeholder="请输入验证码"
            v-model="form.verify"
            @keyup.enter.native="submit"
            clearable>
          </el-input>
        </el-col>
        <el-col :span="8">
          <send-sms :get-mobile="getMoblie" event-type="loginAndBindingByThirdUser"/>
        </el-col>
      </el-form-item>
      <el-form-item label-width="0px" align="center">
        <el-button type="danger" id="login-submit-button" @click="submit()" :loading="isLoading">确认绑定</el-button>
        <!--        <el-button type="success" @click="$router.push('/Register')">无账号，前去注册</el-button>-->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import SendSms from '../common/SendSms'
export default {
  name: "WechatBinding",
  components: {SendSms},
  mounted: function () {
    // if (typeof this.CurrUser.IsLogin === 'function' && this.CurrUser.IsLogin()) {
    //   this.$router.push('/')
    // }
    // 非开发环境,清除数据
    this.initUser()
  },
  data: function () {
    return {
      thirdUser:{},
      memberIcon:'https://yangfan-shop.oss-cn-hangzhou.aliyuncs.com/icon/no-image.png',
      memberNickname:'',
      isLoading: false,
      form: {
        username: '',
        verify: ''
      },
      rules: {
        username: [
          {required: true, message: '请输入 手机号', trigger: ['blur','change']},
          {min: 3, message: '长度在 3 个字符以上', trigger: ['blur','change']}
        ],
        verify: [
          {required: true, message: '请输入 验证码', trigger: ['blur','change']},
          {min: 1, max: 6, message: '验证码填写错误', trigger: ['blur','change']}
        ]
      }
    }
  },
  methods: {
    initUser:function () {
      var item = localStorage.getItem("thirdUser")
      if (item && item.length>0){
        this.thirdUser=JSON.parse(item)
        this.memberIcon=this.thirdUser.headimgurl
        this.memberNickname=this.thirdUser.nickname
      }else{
        this.$message.warning('参数错误')
        this.$router.push("/Login")
      }
    },
    getMoblie: function () {
      return this.form.username
    },
    // 绑定手机号码 && 登陆
    submit: function () {
      var $this = this
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          $this.isLoading = true
          $this.MyRequest($this.ApiDoNameShop+'Public/loginAndBindingByThirdUser', {
            mobile:$this.form.username,
            data:JSON.stringify($this.thirdUser),
            mobileVerifyCode:$this.form.verify,
          }, function (data) {
            $this.isLoading = false
            $this.CurrUser.setCache({
              token: data.token,
              username: $this.form.username,
            })
            $this.$router.push("/")
          }, function (data) {
            $this.isLoading = false
            $this.successTip(data.message,'error')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置表单
    resetForm () {
      this.$refs.ruleForm.resetFields()
    },
    register:function () {
      // this.$alert('请联系向: 623862474@qq.com 发送邮件进行注册。')
    }
  }
}
</script>

<style scoped>

</style>
